<template>
  <div>
    <el-row>
      <el-col :span="10">
        <el-button icon="el-icon-plus" @click="addcustom()">
          新增供应商
        </el-button>
      </el-col>
      <el-col :span="7">
        <el-col :span="1.5">
          <el-button @click="start()">
            全部
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="allopen(open)">
            全部启用
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="allopen(close)">
            全部禁用
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="showallstate(true)">
            展示启用
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="showallstate(false)">
            展示禁用
          </el-button>
        </el-col>
      </el-col>
      <el-col :span="5">
        <el-form :inline="true" class="demo-form-inline" style="margin-right: 10px">
          <el-form-item>
            <el-input v-model=input placeholder="请输入客户名称、信用代码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button circle icon="el-icon-refresh" @click="refresh()"></el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :key="changenow">
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              @click="handleshow(scope.$index, scope.row)"
              class="el-icon-search" circle></el-button>
            <el-button
              @click="handleupdate(scope.$index, scope.row)"
              class="el-icon-edit" circle></el-button>
            <el-button
              @click="handlefocus(scope.$index, scope.row)"
              class="el-icon-star-off"
              type="danger" circle v-if="scope.row.applystatus==1"></el-button>
            <el-button
              @click="handlefocus(scope.$index, scope.row)"
              class="el-icon-star-off"
              circle v-if="scope.row.applystatus==2"></el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          width="80">
          <template slot-scope="scope">
            <span
            >{{scope.$index+1}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="creditcode"
          label="统一信用代码"
          width="280">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="180">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              active-text="开启"
              inactive-text="禁用"
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-model="scope.row.state"
              @change=change(scope.$index,scope.row)
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="shortname"
          label="简称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="codename"
          label="代号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="area"
          label="区域"
          width="100">
        </el-table-column>
        <el-table-column
          prop="addtime"
          label="添加日期"
          width="180">
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-left: 850px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="1"
        :page-sizes="[10,15,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total=this.pageinfo.total>
      </el-pagination>
    </div>
    <el-dialog title="详细信息展示" :visible.sync="showform">
      <div>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="公司名称">
                <el-input v-model="showdata.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="信用代码">
                <el-input v-model="showdata.creditcode" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="公司简称">
                <el-input v-model="showdata.shortname" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司代号">
                <el-input v-model="showdata.codename" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="所处区域">
                <el-input v-model="showdata.area" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="添加日期" disabled>
                <el-input v-model="showdata.addtime" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showform=false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="详细信息修改" :visible.sync="updateform">
      <div>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="公司名称">
                <el-input v-model="updatedata.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="信用代码">
                <el-input v-model="updatedata.creditcode"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="公司简称">
                <el-input v-model="updatedata.shortname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司代号">
                <el-input v-model="updatedata.codename"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="所处区域">
                <el-input v-model="updatedata.area"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="添加日期" disabled>
                <el-input v-model="updatedata.addtime"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateform = false">取 消</el-button>
        <el-button type="primary" @click="updatethis()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增客户" :visible.sync="addform">
      <div>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="公司名称">
                <el-input v-model="adddata.name" placeholder="请输入公司名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="信用代码">
                <el-input v-model="adddata.creditcode" placeholder="请输入18位信用代码"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="公司简称">
                <el-input v-model="adddata.shortname" placeholder="请输入公司简称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司代号">
                <el-input v-model="adddata.codename" placeholder="请输入公司代号"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-col :span="12">
              <el-form-item label="所处区域">
                <el-input v-model="adddata.area" placeholder="请输入区域"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addform = false">取 消</el-button>
        <el-button type="primary" @click="addnewcustom()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "custommanage",
  data() {
    return {
      input: '',
      value: 100,
      pn: '1',
      page: '10',
      showform: false,
      showdata: {},
      updateform: false,
      updatedata: {},
      changenow: '',
      pageinfo: [],
      tableData: [],
      open: true,
      close: false,
      addform: false,
      adddata: {
        name: '',
        creditcode: '',
        state: 0,
        friendtype: 2,
        shortname: '',
        codename: '',
        area: '',
      },
      adddata1: {
        name: '',
        creditcode: '',
        state: 0,
        friendtype: 2,
        shortname: '',
        codename: '',
        area: '',
      },
      index: ''

    }
  },
  methods: {
    onSubmit() {
      var regex = /^([0-9]{8})[0-9A-Z]{10}$/;
      var regex1 = /^[\u4e00-\u9fa5]+$/;
      if (regex.test(this.input)) {
        this.axios.get(this.baseUrl + "ship/queryByCredit/" + 2 + "/" + this.input)
          .then(res => {
            this.tableData = [];
            this.tableData.push(res.data.data);
            this.pageinfo.total = 1
          })
      } else if (regex1.test(this.input)) {
        this.axios.get(this.baseUrl + "ship/queryByName/" + 2 + "/" + this.input)
          .then(res => {
            this.tableData = [];
            this.tableData.push(res.data.data);
            this.pageinfo.total = 1
          })
      } else {
        this.$message({
          message: '请输入正确格式的公司名称和信用代码'
        });
      }
    },

    //弹出框展示数据
    handleshow(index, row) {
      this.showform = true;
      this.showdata = row;
    },
    handleupdate(index, row) {
      this.index = index;
      this.updateform = true;
      var parse = JSON.stringify(row);
      var json = JSON.parse(parse);
      this.updatedata = json;
    },
    //删除一行
    handledelete(index, row) {
      this.$confirm('将删除该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get(this.baseUrl + "ship/deleteById/" + row.id)
          .then(res => {
            this.start();
            this.$message({
              type: 'success',
              message: '成功删除'
            });
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handlefocus(index, row){

      this.axios.post(this.baseUrl + "ship/updateapplystatus", row)
        .then(res => {
          console.log(res)
          if (res.data.code==200){
            if(row.applystatus==1){
              row.applystatus=2
            }else {
              row.applystatus=1
            }
            this.$message({
              type: 'success',
              message: '操作成功'
            });
          }else {
            this.$message({
              type: 'warning',
              message: '操作失败'
            });
          }
          /*this.$set(this.tableData, this.index, res.data.data);*/
        })

    },



    updatethis() {
      this.$confirm('请确认修改信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateform = false
        this.axios.post(this.baseUrl + "ship/updatestate", this.updatedata)
          .then(res => {
            this.$set(this.tableData, this.index, res.data.data);
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });

    },

    //全部启用禁用
    allopen(value) {
      this.$confirm('此操作存在风险, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let index = 0;
        var s = JSON.stringify(this.tableData);
        var parse = JSON.parse(s);
        for (let i = 0; i < parse.length; i++) {
          parse[i].state=value;
        }
        this.axios({
          url: this.baseUrl + "ship/updatestateall",
          method: 'post',
          dataType: 'json',
          data: JSON.stringify(parse),
          headers: {
            'Content-Type': 'application/json',
          },
        }).then(res => {
          if (res.data.code === 200) {
            this.tableData=parse;
            this.$message({
              type: 'success',
              message: '状态修改成功'
            });
          }
        })
          .catch(error => {
            console.log(error)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },

    //新增客户
    addcustom() {
      this.addform = true;
    },
    addnewcustom() {
      if (this.adddata.name == "") {
        this.$message({
          type: 'info',
          message: '请填写公司名称'
        });
        return;
      }
      if (this.adddata.creditcode == "") {
        this.$message({
          type: 'info',
          message: '请填写信用代码'
        });
        return;
      }
      if (this.adddata.shortname == "") {
        this.$message({
          type: 'info',
          message: '请填写公司简称'
        });
        return;
      }
      if (this.adddata.name == "") {
        this.$message({
          type: 'info',
          message: '请填写公司代码'
        });
        return;

      }
      if (this.adddata.area == "") {
        this.$message({
          type: 'info',
          message: '请填写区域'
        });
        return;
      }
      this.$confirm('请确认修改信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(this.baseUrl + "ship/insert", this.adddata)
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '添加成功'
              });
              this.addform = false;
              this.tableData = res.data.data.list
              this.pageinfo = res.data.data
              this.adddata=this.adddata1;
              this.start();
            } else {
              this.$message({
                type: 'warning',
                message: '添加失败，请核对信息重新输入'
              });
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },


    //分页
    handleSizeChange(val) {
      this.page = val;
      this.start();
    },
    handleCurrentChange(val) {
      this.pn = val;
      this.start();
    },


    change: function (index, row) {
      this.axios.post(this.baseUrl + "ship/updatestate", row)
        .then(res => {
          if (res.data.data.code == 200) {
            row.state = !row.state;
          }
        })
    },
    start() {
      this.axios.get(this.baseUrl + "ship/queryByfriend/" + 2 + "/" + this.pn + "/" + this.page)
        .then(res => {
          this.tableData = res.data.data.list
          this.pageinfo = res.data.data
          console.log(this.tableData)
        })
    },
    showallstate(val) {
      this.axios.get(this.baseUrl + "ship/findAllByState/" + 1 + "/" + val + "/" + this.pn + "/" + this.page)
        .then(res => {
          this.tableData = res.data.data.list
          this.pageinfo = res.data.data
        })
    },
    refresh() {
      this.start();
    }
  },
  created() {
    this.start();
  }
}
</script>

<style scoped lang="less">
@import "../../assets/css/element-ui.css";
</style>
